<template>
  <div class="box">
    <!-- 叉号 -->
    <div class="ico">
      <!-- @click="$router.back()" 返回上一级 -->
      <span class="el-icon-back" @click="$router.back()"></span>
    </div>
    <!-- 图标标题 -->
    <div class="title">
      <img class="svg" src="@/images/2mb7or.svg" alt />
    </div>
    <div class="cell-phone">
      <AuthInput
        type="text"
        placeholder="请输入手机号"
        :rule="/^\d{5,11}$/"
        err_msg="请输入手机号"
        @valChange="setCell"
      />
      <AuthInput
        type="text"
        placeholder="请输入昵称"
        :rule="/^\w{3,8}$/"
        err_msg="昵称必须是三位字符"
        @valChange="setusername"
      />
      <AuthInput
        type="password"
        placeholder="请输入密码"
        :rule="/^\w{3,8}$/"
        err_msg="密码不合法"
        @valChange="setpassword"
      />
    </div>

    <div class="login">
      <AuthBtn btnText="提交注册" @submit="register" />
    </div>
  </div>
</template>

<script>
// 1. 引入子组件
import AuthInput from "../components/AuthInput";
import AuthBtn from "../components/AuthBtn";
export default {
  data() {
    return {
      cellphone: "",
      username: "",
      password: "",
    };
  },
  // 2. 注册子组件
  components: {
    AuthInput,
    AuthBtn,
  },
  methods: {
    register() {
      console.log("父组件得到通知, 按钮被点击了, 后面应该发送请求");
      // 3. 编写后续处理函数
      // 之前存起来的输入框数据
      //这里可以用来发送请求了
      console.log("手机号", this.cellphone);
      console.log("用昏迷", this.username);
      console.log("密码", this.password);
      if (!this.cellphone || !this.username || !this.password) {
        this.$toast.fail("请输入完整信息");
        return;
      }
      this.$axios({
        method: "post",
        url: "/register",

        data: {
          username: this.cellphone,
          nickname: this.username,
          password: this.password,
        },
      })
        .then((res) => {
          console.log(res.data);

          if (res.data.message == "注册成功") {
            this.$toast.success(res.data.message);
            setTimeout(() => {
              this.$router.push("/login");
            }, 500);
            // 用户密码错误逻辑
          }
        })
        .catch((err) => {
          // 如果是网络问题以及其他错误逻辑
          this.$toast.fail("系统错误");
        });
    },
    setCell(newCell) {
      this.cellphone = newCell;
    },
    setusername(newUser) {
      this.username = newUser;
    },
    setpassword(newPass) {
      this.password = newPass;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  padding: 24/360 * 100vw;
  .ico {
    .el-icon-back {
      font-size: 27/360 * 100vw;
    }
  }
  .title {
    margin-top: 18/360 * 100vw;
    text-align: center;
    .svg {
      width: 230/360 * 100vw;
      height: 230/360 * 100vw;
    }
  }
}
</style>

